<script>
import { mapState, mapActions } from 'pinia'
import { useCounterStore, useUserStore } from '../stores/01.认识pinia'

export default {
  data() {
    return {
      username: ''
    }
  },
  computed: {
    // 使用mapState映射store中的状态
    ...mapState(useCounterStore, ['count', 'doubleCount']),
    ...mapState(useUserStore, ['username']),
    
    // 获取store实例
    counterStore() {
      return useCounterStore()
    },
    userStore() {
      return useUserStore()
    }
  },
  methods: {
    // 使用mapActions映射store中的方法
    ...mapActions(useCounterStore, ['increment']),
    
    // 设置用户名
    setUsername() {
      if (this.username) {
        this.userStore.setUsername(this.username)
        this.username = ''
      }
    }
  }
}
</script>

<template>
  <div class="tutorial-container">
    <header>
      <h1>01.认识pinia</h1>
      
      <nav class="tutorial-nav">
        <router-link to="/01" class="nav-link">01.认识pinia</router-link>
        <router-link to="/02" class="nav-link">02.定义store(选项式)</router-link>
      </nav>
    </header>

    <main>
      <section class="intro">
        <h2>什么是 Pinia?</h2>
        <p>Pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态。它有点像一个永远存在的组件，每个组件都可以读取和写入它。</p>
        
        <h3>Pinia 的三个核心概念：</h3>
        <ul>
          <li><strong>State</strong>：相当于组件中的 <code>data</code></li>
          <li><strong>Getters</strong>：相当于组件中的 <code>computed</code></li>
          <li><strong>Actions</strong>：相当于组件中的 <code>methods</code></li>
        </ul>
      </section>

      <section class="counter-demo">
        <h2>计数器示例</h2>
        <div class="demo-box">
          <p>当前计数：<span class="value">{{ count }}</span></p>
          <p>双倍计数：<span class="value">{{ doubleCount }}</span></p>
          <button @click="increment">增加计数</button>
          <p class="code-note">这个计数器使用了 <code>counterStore</code></p>
        </div>
      </section>

      <section class="user-demo">
        <h2>用户信息示例</h2>
        <div class="demo-box">
          <p>当前用户名：<span class="value">{{ userStore.username || '未设置' }}</span></p>
          <div class="input-group">
            <input v-model="username" placeholder="输入用户名" />
            <button @click="setUsername">设置用户名</button>
          </div>
          <p class="code-note">这个用户信息使用了 <code>userStore</code></p>
        </div>
      </section>

      <section class="code-section">
        <h2>Pinia 的使用步骤</h2>
        <ol>
          <li>安装 Pinia: <code>npm install pinia</code></li>
          <li>在 main.js 中创建 Pinia 实例并注册</li>
          <li>定义 Store</li>
          <li>在组件中使用 Store</li>
        </ol>

        <h3>查看代码示例：</h3>
        <p>请查看 <code>src/stores/01.认识pinia.js</code> 文件，了解如何定义 Store。</p>
      </section>
    </main>
  </div>
</template>

<style scoped>
.tutorial-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
    Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
}

header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 2rem;
  text-align: center;
}

h1 {
  font-size: 2.5rem;
  color: #42b883;
  margin: 1rem 0;
}

h2 {
  font-size: 1.8rem;
  color: #2c3e50;
  margin-top: 2rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid #eee;
  padding-bottom: 0.5rem;
}

h3 {
  font-size: 1.4rem;
  color: #2c3e50;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

section {
  margin-bottom: 2rem;
}

.logo {
  display: block;
  margin-bottom: 1rem;
}

.demo-box {
  background-color: #f8f8f8;
  border-radius: 8px;
  padding: 1.5rem;
  margin: 1rem 0;
  border: 1px solid #eaeaea;
}

.value {
  font-weight: bold;
  color: #42b883;
  font-size: 1.2rem;
}

button {
  background-color: #42b883;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  margin: 0.5rem 0;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #33a06f;
}

input {
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
  margin-right: 0.5rem;
}

.input-group {
  display: flex;
  margin: 1rem 0;
}

code {
  background-color: #eee;
  padding: 0.2rem 0.4rem;
  border-radius: 3px;
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
  font-size: 0.9rem;
}

.code-note {
  font-size: 0.9rem;
  color: #666;
  margin-top: 1rem;
}

ul, ol {
  padding-left: 1.5rem;
  line-height: 1.6;
}

li {
  margin-bottom: 0.5rem;
}

.tutorial-nav {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
  gap: 1rem;
}

.nav-link {
  padding: 0.5rem 1rem;
  background-color: #f0f0f0;
  border-radius: 4px;
  color: #2c3e50;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
}

.nav-link:hover {
  background-color: #e0e0e0;
}

.nav-link.router-link-active {
  background-color: #42b883;
  color: white;
}

@media (min-width: 768px) {
  .input-group {
    width: 100%;
    max-width: 400px;
  }
  
  input {
    flex: 1;
  }
}
</style>
